@import 'variables.css';

.dark-theme {
  .el-form-item__label {
    color: var(--el-color-text-regular);
  }

  /*Menu*/

  .el-menu {
    background: linear-gradient(135deg, #020101ff 0, #020031 100%);
    border: none;
  }

  .el-menu-item {
    color: var(--el-color-text-placeholder);

    &:hover {
      background: linear-gradient(135deg, #0909bdff 0, #020031 100%);
    }
  }

  .el-menu-item i {
    color: inherit;
  }

  .el-submenu__title {
    color: var(--el-color-text-placeholder);
  }

  .el-submenu__title i {
    color: inherit;
  }

  .el-submenu__title:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }

  /*card*/

  .el-card {
    background: rgba(1, 8, 27, 0.4);
    border: none;
    height: 100%;

    &.is-always-shadow {
      box-shadow: 0 0 2px 2px rgba(76, 119, 169, 0.7);
    }
  }

  .el-card__header {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    background-color: #1f354f;
    border-bottom: 0;
  }

  /* Table*/

  .el-table,
  .el-table tr {
    background-color: var(--el-background-color-base);
  }

  .el-table {
    /*  border-width: 2px;
      border-image: -webkit-linear-gradient(left, var(--el-border-color-base) 0%, #fff 50%, var(--el-border-color-base) 100%) 2 2;
      box-shadow: 0 0 2px 2px rgba(76, 119, 169, 0.7);
      background: rgba(1, 8, 27, 0.4);*/
    background-color: var(--el-background-color-base);
    color: var(--el-color-success-lighter);
  }

  .el-table td {
    padding: 5px 0;
  }

  .el-table th {
    padding: 5px 0;
    background-color: var(--el-background-color-base);
  }

  .el-table th.el-table__cell {
    background-color: rgba(38, 38, 42, 1);
    color: var(--el-color-white);
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: #303133;
  }

  /* DatePicker*/

  .el-picker-panel {
    background-color: var(--el-background-color-show);
    border: 1px solid var(--el-border-color-base);
  }

  .el-picker-panel__sidebar {
    background-color: var(--el-background-color-show);
  }

  .el-picker-panel__footer {
    background-color: var(--el-background-color-show);
  }

  .el-date-range-picker__content,
  .el-date-range-picker__time-header,
  .el-picker-panel__footer,
  .el-picker-panel__sidebar {
    border-color: var(--el-border-color-base);
  }

  .el-time-panel {
    background-color: var(--el-background-color-show);
  }

  .el-time-spinner__item:hover:not(.disabled):not(.active) {
    background-color: var(--el-color-primary);
  }

  .el-time-panel__btn.confirm {
    color: var(--el-color-primary);
  }

  .el-time-spinner__item {
    color: var(--el-color-text-regular);
  }

  .el-time-spinner__item.active:not(.disabled) {
    color: var(--el-color-primary);
  }

  .el-time-panel__content::after,
  .el-time-panel__content::before,
  .el-time-panel__footer {
    border-color: var(--el-border-color-base);
  }

  .el-picker-panel__icon-btn,
  .el-picker-panel__shortcut {
    color: var(--el-color-text-regular);
  }
  .el-button{
    --el-button-bg-color:rgba(0, 0, 0, 0.06);
    --el-button-hover-bg-color:rgba(0, 0, 0, 0.06);
    --el-button-text-color: var(--el-color-white);
    --el-button-hover-border-color:var(--el-button-active-text-color);
  }
  .el-button.is-disabled.is-plain,
  .el-button.is-disabled.is-plain:hover,
  .el-button.is-disabled.is-plain:focus {
    background-color: var(--el-border-color-base);
  }

  .el-picker-panel__shortcut:hover {
    color: var(--el-color-primary);
  }

  /*Checkbox,radio*/

  .el-checkbox {
    color: var(--el-checkbox-font-color);
  }

  .el-range-input,
  .el-checkbox__inner,
  .el-radio__inner {
    background-color: var(--el-background-color-base);
    border-color: var(--el-border-color-base);
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-radio__input.is-checked .el-radio__inner {
    border-color: var(--el-color-primary);
    background-color: var(--el-color-primary);
  }

  .el-checkbox__input.is-checked + .el-checkbox__label,
  .el-radio__input.is-checked + .el-radio__label {
    color: var(--el-color-primary);
  }

  .el-checkbox {
    margin-right: 8px;
  }

  /*pagination*/

  .pagination {
    text-align: right;

    .el-pagination__total {
      float: left;
    }
  }

  .el-pagination.is-background .el-pager li {
    background-color: var(--el-color-info);
  }

  .el-pagination.is-background .btn-prev:not(:disabled),
  .el-pagination.is-background .btn-next:not(:disabled) {
    background-color: var(--el-color-info);
  }

  .el-pagination.is-background .btn-prev:disabled,
  .el-pagination.is-background .btn-next:disabled {
    color: var(--el-color-white);
    background-color: var(--el-color-text-placeholder);
  }

  .el-pagination__jump,
  .el-pagination__total {
    color: var(--el-color-text-regular);
  }

  .el-pagination__jump .el-input {
    width: 50px;
  }

  /*tree*/

  .el-tree {
    background-color: var(--el-background-color-base);
  }

  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: var(--el-border-color-extra-light);
  }

  .el-tree .el-tree-node__content {
    background-color: var(--el-background-color-base);
  }

  /*dialog*/

  .el-dialog {
    background: var(--el-background-color-base);
    border: var(--el-border-base);
  }

  .el-dialog__title {
    color: var(--el-color-white);
  }

  .el-dialog__header {
    //border-bottom:1px solid #869bbb;
  }

  /*button*/

  .el-button.is-plain {
    background: var(--el-background-color-base);
    //border-color: inherit;
    color: var(--el-color-info-lighter);

    &:hover,
    &:active,
    &:focus {
      background: var(--el-background-color-base);
      color: inherit;
    }
  }

  .el-button + .el-button {
    margin-left: 10px;
  }

  /*upload*/

  .el-upload-dragger {
    background: var(--el-background-color-base);
    border-color: var(--el-color-info);
  }

  .el-upload-dragger,
  .el-upload {
    width: 100%;
  }

  /*loading*/

  .el-loading-mask {
    background: rgba(0, 0, 0, 0.3);
  }

  /*crumb*/

  .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
    font-weight: normal;
    color: var(--el-color-text-regular);
    cursor: text;
  }

  .el-breadcrumb__inner.is-link {
    color: var(--el-color-text-regular);
  }

  .el-breadcrumb__inner.is-link:hover {
    color: var(--el-color-primary);
  }

  /*input*/

  .el-input__inner,
  .el-textarea__inner {
    background: var(--el-background-color-base);
    color: var(--el-color-text-regular);
    border-color: var(--el-border-color-base);
  }

  .el-input-group__prepend {
    padding: 0;
  }

  .el-input-number__decrease,
  .el-input-number__increase {
    background: var(--el-background-color-base);
    color: var(--el-color-text-regular);
  }

  .el-input-number--small {
    width: 100%;
  }

  /*select*/

  .el-select {
    width: 100%;
  }

  .el-select__popper.el-popper[role='tooltip'] {
    background: var(--el-background-color-base);
    color: var(--el-color-text-regular);
  }

  .el-select-dropdown__item {
    color: var(--el-color-text-regular);
  }

  .el-select-dropdown__item.selected {
    color: var(--el-color-primary);
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: var(--el-border-color-extra-light);
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background-color: var(--el-border-color-extra-light);
  }

  .el-select .el-select__tags .el-tag {
    background-color: var(--el-border-color-extra-light);
  }

  .el-calendar {
    background: var(--el-background-color-base);
  }

  .el-calendar-table .el-calendar-day:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .el-drawer {
    background: var(--el-background-color-base);

    .el-drawer__header {
      color: var(--el-color-white);
    }
  }

  .el-dropdown__popper.el-popper[role='tooltip'] {
    background: var(--el-background-color-base);
    border: var(--el-border-base);
  }

  .el-dropdown-menu {
    background: var(--el-background-color-base);

    .el-dropdown-menu__item {
      color: var(--el-color-white);
    }

    .el-dropdown-menu__item:focus,
    .el-dropdown-menu__item:not(.is-disabled):hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }

  .el-popper.is-light .el-popper__arrow::before {
    background: var(--el-background-color-base);
  }

  .el-message-box {
    background: var(--el-background-color-base);
    border: var(--el-border-base);

    .el-message-box__title {
      color: var(--el-color-white);
    }

    .el-message-box__content {
      color: var(--el-color-text-regular);
    }
  }

  .el-message-box__status {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px !important;
  }

  .el-page-header__content {
    color: var(--el-color-text-regular);
  }

  .el-pagination .btn-next,
  .el-pagination .btn-prev,
  .el-pager li {
    background: var(--el-background-color-base);
    color: var(--el-color-text-regular);
    &:hover,
    &.active {
      color: var(--el-pagination-hover-color);
    }
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: var(--el-color-primary);
  }

  .el-tabs__item {
    color: var(--el-color-text-regular);
  }

  .el-collapse {
    --el-collapse-border-color: rgba(255, 255, 255, 0.09);
    --el-collapse-header-bg-color: #191c21;
    --el-collapse-header-font-color: var(--el-color-white);
    --el-collapse-content-bg-color: #191c21;
    --el-collapse-content-font-color: var(--el-color-text-regular);
    border-top: 1px solid #191c21;
    --el-collapse-header-height: 40px;
    .el-collapse-item__wrap {
      &:last-child {
        border: 0;
      }
    }
  }

  .el-popover {
    --el-popover-background-color: var(--el-background-color-base);
    --el-popover-font-size: var(--el-font-size-base);
    --el-popover-border-color: var(--el-border-color-lighter);
    --el-popover-padding: 0;
    --el-popover-padding-large: 18px 20px;
    --el-popover-title-font-size: 16px;
    --el-popover-title-font-color: var(--el-text-color-primary);
    --el-popover-border-radius: 4px;
  }

  .el-row {
    margin: 0;
  }
}
